<template>
  <div class="storesRecord-container">
    <!-- 头部导航栏 -->
<my-header title="进店记录" @onClickLeft="$router.push('/my')"/>
<!-- 搜索框 -->
    <div class="search-box">
      <van-icon name="search" />
      <span class="SearchStores">搜索店铺</span>
    </div>
<!-- 导航栏 -->
<van-grid direction="horizontal" clickable  border>
      <van-grid-item text="城市">
        <van-icon name="map-marked" slot="icon"/>
      </van-grid-item>
      <van-grid-item icon="photo-o" text="距离" >
        <van-icon name="sort" slot="icon"/>
      </van-grid-item>
      <van-grid-item text="活动" >
        <van-icon name="new-arrival" slot="icon"/>
      </van-grid-item>
      <van-grid-item icon="photo-o" text="行业" >
        <van-icon name="wap-nav" slot="icon"/>
      </van-grid-item>
</van-grid>
<!-- 店铺列表 -->
<store-info storesName="新佳宜" storesNumber="414416" storesDistance="288m" >
        <div slot="right" class="rightSlot">
            <van-icon name="star-o" color="blue"/>
            <span>收藏店铺</span>
        </div>
</store-info>

<store-info storesName="泽沛轩" storesNumber="668866" storesDistance="0m" storeAddress="湖南省.长沙市.岳麓区.东方红大厦">
      <div slot="right" class="rightSlot">
            <van-icon name="star-o" color="blue" />
            <span>收藏店铺</span>
        </div>
</store-info>
    <store-info storesName="西点印象" storesNumber="231423" storesDistance="888m" >
      <div slot="right" class="rightSlot">
            <van-icon name="star-o"  color="blue"/>
            <span>添加收藏</span>
        </div>
</store-info>
<store-info storesName="海底捞" storesNumber="888888" storesDistance="666m" >
      <div slot="right" class="rightSlot">
            <van-icon name="star-o" color="blue" />
            <span>添加收藏</span>
        </div>
</store-info>
<store-info storesName="KFC" storesNumber="323132" storesDistance="28km" storeAddress="湖南省.岳阳市.湘阴县.东方村">
      <div slot="right" class="rightSlot">
            <van-icon name="star-o" color="blue"/>
            <span>添加收藏</span>
        </div>
</store-info>
  </div>
</template>

<script>
import MyHeader from '../components/my-header.vue'
import StoreInfo from '../components/store-info.vue'

export default {
  name: 'storesRecordIndex',
  components: {
    MyHeader,
    StoreInfo
  },
  props: {},
  data () {
    return {

    }
  },
  computed: {},
  watch: {},
  created () {

  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style scoped lang="less">
.rightSlot {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
  span {
      font-size: 25px;
      margin-top: 10px;
    }
    .van-icon {
      color: #ff8a01;
      font-size: 60px;
    }
}
.search-box {
  width: 90%;
  height: 80px;
  background-color: #fff;
  border-radius: 40px;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  margin-bottom: 15px;
  color: #c8c8c8;
  border: 1px solid #bbb;
  .SearchStores {
    font-size: 35px;
    margin-left: 10px;
    margin-bottom: 3px;
  }
}
.van-grid {
    position: relative;
    border: 1px solid black;
    .van-grid-item {
      border-right: 4px solid black;
    }
    .van-grid-item:last-child {
      border-right: 0;
    }
    /deep/.van-grid-item__text {
      font-size: 35px;
    }
    .van-icon {
      position: absolute;
      right: -116px;
      top: -20px;
      font-size: 38px;
    }
  }
</style>
